<mat-spinner *ngIf="loading" diameter="30" strokeWidth="2"></mat-spinner>

<ng-container *ngIf="!loading">
    <mtx-alert *ngIf="inviteLoadErrorMessage" type="warning">
        {{ 'Auth.' + inviteLoadErrorMessage | translate: {Default: inviteLoadErrorMessage} }}
    </mtx-alert>

    <div *ngIf="!inviteLoadErrorMessage">
        <div class="register-header">
            <h2>
                {{
                    'Auth.ACCEPT_INVITE.HEADING'
                        | translate
                            : {
                                    organizationName:
                                        invitation?.organization?.name,
                                    Default: 'Accept Invitation to ' + invitation?.organization?.name
                            }
                }}
            </h2>
            <span>{{
                'Auth.ACCEPT_INVITE.SUB_HEADING'
                    | translate: { email: invitation?.email, Default: 'Complete your registration ' + invitation?.email }
            }}</span>
        </div>
        <pac-accept-invite-form
            [invitation]="invitation"
            (submitForm)="submitForm($event)"
        ></pac-accept-invite-form>
    </div>
</ng-container>
